<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Student</title>
    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
    <button class="layui-btn" id="add">添加</button>
    <form class="layui-form" id="addForm" style="display: none;padding: 20px 20px 20px 20px">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <input type="text" name="name" class="layui-input">
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <input type="text" name="age"  class="layui-input">
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">生日</label>
            <input type="text" name="birth" id="date1"  class="layui-input">
        </div>
        <button lay-submit lay-filter="addFilter" class="layui-btn" >添加</button>
    </form>

    <table id="studentTable" lay-filter="tableFilter"></table>
    <script type="text/html" id="bar">
        <a class="layui-btn layui-btn-xs" lay-event="upd">修改</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>

    <form class="layui-form" lay-filter="updateFormFilter" id="updateForm" style="display: none;padding: 20px 20px 20px 20px">
        <div class="layui-form-item">
            <input type="hidden" name="id">
            <label class="layui-form-label">姓名</label>
            <input type="text" name="name" class="layui-input">
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <input type="text" name="age"  class="layui-input">
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">生日</label>
            <input type="text" name="birth" id="date2"  class="layui-input">
        </div>
        <button lay-submit lay-filter="updateFilter"  class="layui-btn">修改</button>
    </form>


    <script>
        layui.use(['table','form','laydate','layer'],function () {
            var table = layui.table;
            var form = layui.form;
            var laydate = layui.laydate;
            var layer = layui.layer;
            var $ = layui.$;
            //展示所有  渲染table表格
            table.render({
                elem:'#studentTable',
                url:'student/select',
                height:400,
                page:true,
                limit:3,
                limits:[3,4,5],
                cols:[[
                    {field:'id',title:'编号',width:80,sort:true},
                    {field:'name',title:'姓名',width:80,sort:true},
                    {field:'age',title:'年龄',width:80,sort:true},
                    {field:'birth',title:'生日',width:180,sort:true},
                    {title:'操作',toolbar:'#bar'}
                ]]
            })
            //添加
            $('#add').click(function () {
                layer.open({
                    type:1,
                    title:'添加页面',
                    area:'500px',
                    content:$('#addForm')
                })
            })
            laydate.render({
                elem:'#date1'
            })
            form.on('submit(addFilter)',function () {
                $.ajax({
                    url:'student/add',
                    data:$('#addForm').serialize(),
                    success:function (result) {
                        if(result.flag){
                            layer.msg('添加成功');
                            layer.closeAll();
                            $('#addForm')[0].reset();
                            table.reload('studentTable');
                        }
                    }
                })
                return false;//阻止表单自动提交
            })
            //给修改和删除绑定点击事件
            table.on('tool(tableFilter)',function (obj) {
                //修改操作
                if(obj.event=='upd'){
                    layer.open({
                        type:1,
                        title:'修改页面',
                        area:'500px',
                        content:$('#updateForm')
                    })
                    //加载修改页面数据
                    $.ajax({
                        url: 'student/getOne',
                        data: 'id=' + obj.data.id,
                        success: function (result) {
                            //form对象val方法  是给该form表单内的输入框赋值
                            //其中第一个参数updateFormFilter 是该from表单的lay-filter属性的值
                            //第二个参数是一个键值对类型的对象  key是输入框的name属性值  value是输入框的value值
                            form.val('updateFormFilter', {
                                id: result.id,
                                name: result.name,
                                age: result.age,
                                birth: result.birth,
                            })
                        }
                    })
                    laydate.render({
                        elem:'#date2'
                    })
                    form.on('submit(updateFilter)',function () {
                        $.ajax({
                            url:'student/update',
                            data:$('#updateForm').serialize(),
                            success:function (result) {
                                if(result.flag){
                                    layer.msg('修改成功');
                                    layer.closeAll();
                                    table.reload('studentTable');
                                }
                            }
                        })
                        return false;//阻止表单自动提交
                    })

                }else if(obj.event=='del'){   //删除操作
                    layer.confirm('确定删除吗？',function (index) {
                        $.ajax({
                            url:'student/delete',
                            data:'id='+obj.data.id,
                            success:function (result) {
                                if(result.flag){
                                    layer.msg('删除成功');
                                    table.reload('studentTable');
                                }
                            }
                        })
                        layer.close(index);
                    })
                }
            })
        })
    </script>
</body>
</html>